<!DOCTYPE html>
<html>
<head>
<!-- Standard Meta -->
<meta charset="utf-8" />
<title>Getting Started | Semantic UI</title>
<meta name="description"
	content="Getting up and running with Semantic UI" />
	<script src="../resources/static/libs/detect.min.js"></script>
<script src="../resources/static/libs/jquery.min.js"></script>
<script src="../resources/static/libs/clipboard-polyfill.js"></script>
<script src="../resources/static/libs/cookies.js"></script>
<script src="../resources/static/libs/jquery.easing.1.3.js"></script>
<script src="../resources/static/libs/highlight.js"></script>
<script src="../resources/static/libs/jquery.history.js"></script>
<script src="../resources/static/libs/tablesort.min.js"></script>
<script src="../resources/dist/semantic.js"></script>
<script src="../resources/js/docs.js"></script>

<link rel="stylesheet" type="text/css" class="ui"
	href="../resources/dist/semantic.css">
<link rel="stylesheet" type="text/css" href="/../resources/static/style/docs.css">
<link rel="stylesheet" type="text/css" href="/../resources/static/style/rtl.css">

<script type="text/javascript">
	window.liveSettings = {
		api_key : '9ede3015b9f84c1aabc81ab839c55d74',
		parse_attr : [ 'data-title', 'data-content' ],
		detectlang : false,
		autocollect : true,
		ignore_tags : [ 'i', 'code', 'pre' ],
		parse_attr : [ 'data-title', 'data-content', 'data-text' ],
		ignore_class : [ 'code', 'anchor' ]
	};
</script>
</head>
<body>
	<script src="../resources/js/started.js"></script>
				<!-- top部分 -->
				<div class="ui masthead vertical segment">
					<div class="ui container">
						<div class="introduction">

							<h1 class="ui header">
								Getting Started

								<div class="sub header">

									<a class="twitter-share-button twitter"
										href="http://twitter.com/share"
										data-text="Semantic UI is a next generation UI framework"
										data-url="http://semantic-ui.com" data-via="semanticui"> </a>
									<script type="text/javascript">
										window.twttr = (function(d, s, id) {
											var t, js, fjs = d
													.getElementsByTagName(s)[0];
											if (d.getElementById(id)) {
												return
											}
											js = d.createElement(s);
											js.id = id;
											js.src = "https://platform.twitter.com/widgets.js";
											fjs.parentNode
													.insertBefore(js, fjs);
											return window.twttr || (t = {
												_e : [],
												ready : function(f) {
													t._e.push(f)
												}
											})
										}(document, "script", "twitter-wjs"));
									</script>
									<iframe class="github"
										src="http://ghbtns.com/github-btn.html?user=semantic-org&amp;repo=semantic-ui&amp;type=watch&amp;count=true"
										allowtransparency="true" frameborder="0" scrolling="0"
										width="100" height="20"></iframe>

									Getting up and running with Semantic UI
								</div>
							</h1>

							<div class="ui hidden divider"></div>

							<div class="ui right floated main menu">
								<a class="bug popup icon item" data-content="Edit This Page"
									href="https://github.com/Semantic-Org/Semantic-UI-Docs/edit/master/server/documents/introduction/getting-started.html.eco">
									<i class="edit icon"></i>
								</a> <a class="github popup icon item"
									data-content="View project on GitHub"
									href="https://github.com/Semantic-Org/Semantic-UI"> <i
									class="alternate github icon"></i>
								</a>
							</div>
							<div class="ui right floated main menu">
								<a class="music popup icon item" data-content="Play Music">
									<i class="music icon"></i>
								</a>
								<div class="ui language dropdown right floating icon item"
									id="languages" data-content="Select Language">
									<i class="world icon"></i>
									<div class="menu">
										<div class="header">Select Language</div>
										<div class="ui icon search input">
											<i class="search icon"></i> <input type="text"
												placeholder="Search languages...">
										</div>
										<div class="scrolling menu">
											<div class="item" data-percent="100" data-value="en"
												data-english="English">
												<span class="description">English</span> English
											</div>
											<div class="item" data-percent="94" data-value="da"
												data-english="Danish">
												<span class="description">dansk</span> Danish
											</div>
											<div class="item" data-percent="94" data-value="es"
												data-english="Spanish">
												<span class="description">Español</span> Spanish
											</div>
											<div class="item" data-percent="34" data-value="zh"
												data-english="Chinese">
												<span class="description">简体中文</span> Chinese
											</div>
											<div class="item" data-percent="54" data-value="zh_TW"
												data-english="Chinese (Taiwan)">
												<span class="description">中文 (臺灣)</span> Chinese (Taiwan)
											</div>
											<div class="item" data-percent="79" data-value="fa"
												data-english="Persian">
												<span class="description">پارسی</span> Persian
											</div>
											<div class="item" data-percent="41" data-value="fr"
												data-english="French">
												<span class="description">Français</span> French
											</div>
											<div class="item" data-percent="37" data-value="el"
												data-english="Greek">
												<span class="description">ελληνικά</span> Greek
											</div>
											<div class="item" data-percent="37" data-value="ru"
												data-english="Russian">
												<span class="description">Русский</span> Russian
											</div>
											<div class="item" data-percent="36" data-value="de"
												data-english="German">
												<span class="description">Deutsch</span> German
											</div>
											<div class="item" data-percent="23" data-value="it"
												data-english="Italian">
												<span class="description">Italiano</span> Italian
											</div>
											<div class="item" data-percent="21" data-value="nl"
												data-english="Dutch">
												<span class="description">Nederlands</span> Dutch
											</div>
											<div class="item" data-percent="19" data-value="pt_BR"
												data-english="Portuguese">
												<span class="description">Português(BR)</span> Portuguese
											</div>
											<div class="item" data-percent="17" data-value="id"
												data-english="Indonesian">
												<span class="description">Indonesian</span> Indonesian
											</div>
											<div class="item" data-percent="12" data-value="lt"
												data-english="Lithuanian">
												<span class="description">Lietuvių</span> Lithuanian
											</div>
											<div class="item" data-percent="11" data-value="tr"
												data-english="Turkish">
												<span class="description">Türkçe</span> Turkish
											</div>
											<div class="item" data-percent="10" data-value="kr"
												data-english="Korean">
												<span class="description">한국어</span> Korean
											</div>
											<div class="item" data-percent="7" data-value="ar"
												data-english="Arabic">
												<span class="description">العربية</span> Arabic
											</div>
											<div class="item" data-percent="6" data-value="hu"
												data-english="Hungarian">
												<span class="description">Magyar</span> Hungarian
											</div>
											<div class="item" data-percent="6" data-value="vi"
												data-english="Vietnamese">
												<span class="description">tiếng Việt</span> Vietnamese
											</div>
											<div class="item" data-percent="5" data-value="sv"
												data-english="Swedish">
												<span class="description">svenska</span> Swedish
											</div>
											<div class="item" data-precent="4" data-value="pl"
												data-english="Polish">
												<span class="description">polski</span> Polish
											</div>
											<div class="item" data-percent="6" data-value="ja"
												data-english="Japanese">
												<span class="description">日本語</span> Japanese
											</div>
											<div class="item" data-percent="0" data-value="ro"
												data-english="Romanian">
												<span class="description">românește</span> Romanian
											</div>
										</div>

									</div>
								</div>
							</div>

						</div>
						<div class="advertisement">
							<script async type="text/javascript"
								src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=semanticuicom"
								id="_carbonads_js"></script>
						</div>
					</div>
				</div>

				<script src="//m.servedby-buysellads.com/monetization.js"
					type="text/javascript"></script>
				<div class="bsa-cpc"></div>
				<script>
					(function() {
						if (typeof _bsa !== 'undefined' && _bsa) {
							_bsa.init('default', 'CVAIKK7I',
									'placement:semanticuicom', {
										target : '.bsa-cpc',
										align : 'horizontal',
										disable_css : 'true'
									});
						}
					})();
				</script>
				<div class="ui vertical beg transition hidden segment">
					<i class="large red delete link icon"></i>
					<div class="ui red header">
						<i class="disabled warning sign icon"></i>
						<div class="content">
							Want to Support Open Source? Whitelist Your Ad-Blocker.
							<div class="sub header">We promise to not show more than
								one small ad per page. Dont worry, hiding this message will make
								sure you won't get nagged again.</div>
						</div>
					</div>
				</div>
				<!-- content部分 -->
				<div class="main ui intro container">
					<h2 class="ui dividing header">Preface</h2>
					<div class="no example">
						<h4 class="ui header">Using Build Tools</h4>
						<p>
							Semantic UI packaged Gulp build tools so your project can
							preserve its <a href="/usage/theming.html">own theme changes</a>.
						</p>
						<p>The easiest way to install Semantic UI is our NPM package
							which contains special install scripts to make setup interactive
							and updates seamless.</p>

						<p>
							For installing with specific integrations like, Ember, React, or
							Meteor, see our <a href="/introduction/integrations.html">integration
								guide</a>
						</p>
						<p>
							For integrating Semantic UI tasks into your own build tools, or
							using a CDN see our <a href="/introduction/advanced-usage.html">recipes</a>
							section.
						</p>

					</div>
					<div class="ui large info message">
						<div class="ui header">Simpler Setup</div>
						<p>
							If you are using Semantic UI as a dependency and just want to use
							our default theme, use our lighter <a
								href="https://github.com/Semantic-Org/Semantic-UI-CSS"
								target="_blank"><code>semantic-ui-css</code></a> or <a
								href="https://github.com/Semantic-Org/Semantic-UI-Less"
								target="_blank"><code>semantic-ui-less</code></a> repo. If you
							just need the files you can download them as a zip from GitHub.
						</p>
						<a
							href="https://github.com/Semantic-Org/Semantic-UI-CSS/archive/master.zip"
							class="ui secondary button">Download Zip</a> <a
							href="https://github.com/Semantic-Org/" class="ui button"
							target="_blank">View all Semantic-Org Repos </a>
					</div>
					<h2 class="ui dividing header">Installing</h2>

					<div class="no example">
						<h4 class="ui header">Install NodeJS</h4>
						<p>
							If you are unfamiliar with setting up NodeJS you can follow the
							steps below, or check out the <a
								href="https://nodejs.org/download/" target="_blank">download
								page</a> on <a href="http://www.nodejs.org" target="_blank">nodejs.org</a>
						</p>

						<div class="ui secondary menu">
							<a data-tab="mac" class="active item">Mac</a> <a data-tab="linux"
								class="item">Linux</a> <a data-tab="win" class="item">Windows</a>
						</div>
						<div class="ui active basic tab vertical segment" data-tab="mac">
							<h4>Option 1: Homebrew</h4>
							<p>
								After installing <a href="http://brew.sh/" target="_blank">homebrew</a>
							</p>
							<div class="ignored code" data-type="bash">brew install
								node</div>
							<h4>Option 2: Git</h4>
							<div class="ignored code" data-type="bash">git clone
								git://github.com/nodejs/node.git cd node ./configure make sudo
								make install</div>
						</div>
						<div class="ui basic tab vertical segment" data-tab="linux">
							<h4>Install via PPA</h4>
							<p>
								Although <a
									href="http://www.ubuntuupdates.org/ppa/chris_lea_nodejs"
									target="_blank">Chris Lea's PPA</a> was once the best way to
								install node, it is now somewhat out of date.
							</p>
							<p>
								The recommended path to install Semantic UI is using <a
									href="https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager"
									target="_blank">Joyent's package manager</a> guide.
							</p>
							<h4>Ubuntu</h4>
							<div class="ignored code" data-type="bash">curl --silent
								--location https://deb.nodesource.com/setup_6.x | sudo bash -
								sudo apt-get install --yes nodejs</div>
							<h4>Debian</h4>
							<div class="ignored code" data-type="bash">apt-get install
								curl curl --silent --location
								https://deb.nodesource.com/setup_6.x | bash - apt-get install
								--yes nodejs</div>
							<h4>Red Hat</h4>
							<div class="ignored code" data-type="bash">curl --silent
								--location https://rpm.nodesource.com/setup | bash - yum -y
								install nodejs</div>
						</div>
						<div class="ui basic tab vertical segment" data-tab="win">
							<h4>Install the exe</h4>
							<p>
								Download the <a href="http://nodejs.org/download/">NodeJS
									executable</a>.
							</p>
						</div>
					</div>

					<div class="no example">
						<h4>Install Gulp</h4>
						<p>
							Semantic UI uses <a href="http://www.gulpjs.com" target="_blank">Gulp</a>
							to provide command line tools for building themed versions of the
							library with just the components you need.
						</p>
						<p>Gulp is an NPM module and must be installed globally</p>
						<div class="ignored code" data-type="bash">npm install -g
							gulp</div>
					</div>

					<div class="no example">
						<h4>Install Semantic UI</h4>
						<p>Semantic UI is available in an eponymous package on NPM</p>
						<div class="ui secondary menu">
							<a class="active item" data-tab="video"> Video </a> <a
								class="item" data-tab="code"> Code </a>
						</div>
						<div class="ui active tab" data-tab="video">
							<script type="text/javascript"
								src="https://asciinema.org/a/22121.js" id="asciicast-22121"
								async></script>
						</div>
						<div class="ui tab" data-tab="code">
							<div class="ignored code" data-type="bash">npm install
								semantic-ui --save cd semantic/ gulp build</div>
						</div>
					</div>

					<div class="no example">
						<h4>Include in Your HTML</h4>
						<p>
							Running the gulp build tools will compile CSS and Javascript for
							use in your project. Just link to these files in your HTML along
							with the latest <a href="http://www.jquery.com" target="_blank">jQuery</a>.
						</p>
						<div class="ignored code" data-type="html" data-escape="true">
							&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot;
							href=&quot;semantic/dist/semantic.min.css&quot;&gt; &lt;script
							src="https://code.jquery.com/jquery-3.1.1.min.js"
							integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
							crossorigin="anonymous"&gt;&lt;/script&gt; &lt;script
							src=&quot;semantic/dist/semantic.min.js&quot;&gt;&lt;/script&gt;
						</div>
					</div>
					<h2 class="ui dividing header">Updating</h2>

					<div class="no example">
						<h4>Updating via NPM</h4>
						<p>Semantic's NPM install script will automatically update
							Semantic UI to the latest version while preserving your site and
							packaged themes.</p>
						<div class="ignored code" data-type="bash">npm update</div>
					</div>

					<h2 class="ui dividing header">Next Steps</h2>

					<div class="no example">
						<h4>All Set!</h4>
						<p>Well done! Semantic UI is now ready to be used.</p>

						<div class="three column divided stackable center aligned ui grid">
							<div class="column">
								<div class="ui icon header">
									<i class="rocket circular icon"></i> See how to use <a
										href="/introduction/build-tools.html">gulp commands</a> and
									build tools
								</div>
							</div>
							<div class="column">
								<div class="ui icon header">
									<i class="theme circular icon"></i> Learn about <a
										href="/usage/theming.html">changing themes</a>
								</div>
							</div>
							<div class="column">
								<div class="ui icon header">
									<i class="food circular icon"></i> See <a
										href="/introduction/advanced-usage.html">recipes</a> for using
									Semantic UI in your project
								</div>
							</div>
						</div>
					</div>
				</div>
</body>
</html>